<template>
    <div class="login-form">
        <!-- 登录 -->
        <h1>登录</h1>
        <v-text-field v-model="username" label="用户名"></v-text-field>
        <v-text-field v-model="password" label="密码" type="password"></v-text-field>
        <v-btn color="primary" @click="login()">登录</v-btn>
        <v-btn color="primary" text @click="signUp()">注册</v-btn>
        <p><span v-text="tips" id="tip"></span></p>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
// import {Qs} from "qs"

export default defineComponent({
    setup() {
        
    },
    data() {
        return {
            username: '',
            password: '',
            tips: ''
        }
    },
    methods: {
        signUp(){
            console.log('123')
            this.$router.push({name:'Logout'})
        },
        login(){
            let post_data = {
                username: this.username,
                password: this.password
            }
            console.log(post_data)
            this.$api.user.SigIn(post_data).then(res=>{
                console.log('res ....')
                console.log(res)
                if(res.data.code===200){
                    // 存储token信息
                    localStorage.setItem('loginstatus', true)
                    localStorage.setItem('token', res.data.data.token)
                    localStorage.setItem('username', this.username)
                    this.$cookie.set('name', this.username, 30);
                    // console.log(res.Cookie)
                    this.$router.push({name:'List'})
                }
                this.tips = res.data.message
            })
        },
    }
})
// export default {
//     methods: {
//         signUp(){
//             console.log('123')
//         }
//     }
// }
</script>

<style scoped>
.login-form {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    margin-top: 10%;
}
#tip {
    margin-left:20px;
    margin-top: 30px;
    font-size: 17px;
}
</style>